<template>
  <div style='width: 100%'>
    <a-row class='biz-select-modal' type='flex' :gutter='8' style='width: 100%'>
      <a-col class='left'>
        <slot name='left'>
          <a-input-search :value='selectValue.label' :search='search' :readonly='true' />
        </slot>
      </a-col>
      <a-col class='right'>
        <a-button type='primary' icon='search' @click='visible=true' v-if='!disabled'>选择</a-button>
      </a-col>
    </a-row>
    <a-modal
      centered
      :title='title'
      width='80%'
      :visible='visible'
      @ok='handleOk'
      @cancel='close'
      cancelText='关闭'>
      <a-row :gutter='18'>
        <a-col :span='20'>
          <div class='table-page-search-wrapper'>
            <super-query :fieldList='columns' @ok='handleSuperQuery' />
            <v-table
              @radio-change='radioChangeEvent'
              ref='table'
              :data='loadData'
              :columns='columns'
              :showRadio='true'
            />
          </div>
        </a-col>

        <a-col :span='4'>
          <a-card :title='"已"+title' :bordered='false' :head-style='{padding:0}' :body-style='{padding:0}'>
            <a-tag :key='selectedRows[propValue]'>
              {{ selectedRows[propName] }}
            </a-tag>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
  </div>

</template>

<script>
import { TableMixin } from '@/mixins/TableMixin'
import { fetchList, getObjInfoByCode } from '@/api/base/device'
import SuperQuery from '@comp/SuperQuery/SuperQuery'

export default {
  name: 'deviceSelectMadal',
  mixins: [TableMixin],
  components: {
    SuperQuery
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: '选择设备信息'
    },
    propName: {
      type: String,
      default: 'name'
    },
    propValue: {
      type: String,
      default: 'code'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      search: false,
      selectValue: {
        key: '',
        label: ''
      },
      visible: false,
      selectOpen: false,
      columns: [
        {
          title: '设备编号',
          sorter: true,
          type: 'input',
          field: 'code'
        },
        {
          title: '设备描述',
          type: 'input',
          field: 'content'
        },
        {
          title: '设备名称',
          type: 'input',
          field: 'name'
        },
        {
          title: '设备状态',
          type: 'input',
          field: 'status'
        },
        {
          title: '设备类型',
          type: 'input',
          field: 'type'
        }
      ],
      queryParam: {
        matCode: undefined,
        matName: undefined
      },
      loadData: parameter => {
        return fetchList(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      }
    }
  },
  computed: {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.selectValue = {
          key: '',
          label: ''
        }
        // 根据值请求数据获取详细信息
        if(val){
          this.search = true
          getObjInfoByCode({
            code: val
          }).then(res => {
            this.selectValue = {
              key: res.data[this.propValue],
              label: res.data[this.propName]
            }
            this.selectedRows = res.data
            this.search = false
          }).finally(_ => {
            this.search = false
          })
        }

      }
    }
  },
  methods: {
    handleSuperQuery(params) {
      console.log(params, 'params')
      if (params) {
        this.queryParam.queryType = params.queryType
        this.queryParam.queryItems = encodeURI(JSON.stringify(params.queryItems))
      } else {
        this.queryParam.queryType = ''
        this.queryParam.queryItems = ''
      }
      this.queryPage()
    },
    handleOk() {
      let option = {
        key: this.selectedRows[this.propValue],
        label: this.selectedRows[this.propName]
      }
      this.selectValue = option
      this.$emit('change', option.key)
      this.close()
    },
    close() {
      this.visible = false
      this.selectedRows = {}
    },
    radioChangeEvent({ row }) {
      console.log(row, '选择对应的数据')
      this.selectedRows = row
    }
  },
  created() {
    this.queryPage()
  }
}
</script>

<style lang='less' scoped>
.biz-select-modal {

  @width: 82px;

  .left {
    width: calc(100% - @width - 8px);
  }

  .right {
    width: @width;
  }

  .full {
    width: 100%;
  }

  /deep/ .ant-select-search__field {
    display: none !important;
  }
}
</style>